<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>06_列表渲染</title>
	</head>
	<body>

		<!--
			1. 列表显示
			  数组: v-for / index
			  对象: v-for / key
			2. 列表的更新显示
			  删除item
			  替换item
		-->
	
		<div id="demo">
			<h2>测试: v-for 遍历数组</h2>
			<ul>
				<li v-for="(p, index) in persons" :key="index">
					
					{{index}}--{{p.name}}--{{p.age}}
					--
					<button @click="deleteP(index)">删除</button>
					--
					<button @click="updateP(index, {name:'Cat', age: 16})">更新</button>
				</li>
			</ul>
			
			<button @click="addP({name: 'xfzhang', age: 18})">添加</button>

			<h2>测试: v-for 遍历对象</h2>

			<ul>
				<li v-for="(item, key) in persons[1]" :key="key">{{key}}={{item}}</li>
			</ul>
			
			<ul>
				<li v-for="(value, key) in persons[2]" :id="key">
					{{key}} ={{value}}
				</li>
			</ul>

		</div>

		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			//Vue本身只是监视了persons的改变,没有监视数组内部数据的变化
			//Vue重写了数组中的一系列改变数组内部数据的方法(先调用原生，更新界面)--->数组内部改变.界面自动更新
			new Vue({
				el: '#demo',
				data: {
					persons: [
						{
							name: 'Tom',
							age: 18
						},
						{
							name: 'Jack',
							age: 17
						},
						{
							name: 'Bob',
							age: 19
						},
						{
							name: 'Mary',
							age: 16
						}
					]
				},

				methods: {
					deleteP(index) {
						this.persons.splice(index, 1) 
						// 调用了不是原生数组的splice(), 而是一个变异(重写)方法
						// 1. 调用原生的数组的对应方法
						// 2. 更新界面
					},

					updateP(index, newP) {
						console.log('updateP', index, newP)
						// this.persons[index] = newP  
						//并没有改变persons本身,数组内部发生了变化,但并没有调用变异方法.Vue不会更新界面
						// vue根本就不知道
						this.persons.splice(index, 1, newP)
						// this.persons = []
					},

					addP(newP) {
						this.persons.push(newP)
					}
				}
			})
		</script>
	</body>
</html>
